import Header from "../Layout/Header";
import Space from "../Space";

export default function Demo() {
  return (
    <main id="page-demo">
      <Header title={"Header Layout"} extra={"State Layout"} />
      <div className="content-area">
        <div className="!batype-flex flex hover:bg-slate-400">Test flex</div>
        <div className="text-balance text-2xl">H1</div>
        <div className="card border-spacing-0.5">
          <span className="lg:dark:content-auto">lg:dark:content-auto</span>
          <span className="lg:dark:content-auto">lg:dark:content-auto1</span>
          <span className="lg:dark:content-auto">lg:dark:content-auto2</span>
        </div>
        <div className="card mt-4 border-spacing-0.5">
          <Space style={{ paddingLeft: "50px" }}>
            <button className="button primry">primry</button>

            <button className="button default">default</button>
          </Space>
        </div>

        <select
          defaultValue={"test"}
          className="select2-search"
          // onChange={function (res) {
          //   console.log(res.target.value);
          // }}
          children={["Test", "Demo"]}
        />
      </div>
    </main>
  );
}
